<!DOCTYPE html>
<!--<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">-->
<html lang="en">
<head>
    <title>title</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF8">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/magnific-popup.css">
    <script src="js/vendor/knockout-3.0.0.js"></script>
    <script src="js/vendor/heir.js"></script>
    <script src="js/vendor/jquery-1.10.2.min.js"></script>
    <script src="js/vendor/underscore.js"></script>
    <script src="js/vendor/hammer.min.js"></script>
    <script src="js/vendor/d3.js"></script>
    <!--<script src="js/vendor/d3.min.js"></script>-->
    <script src="js/vendor/d3-link-register.js"></script>
    <script src="js/vendor/magnific-popup.min.js"></script>
    <script src="js/serverAccess.js"></script>
    <script src="js/timer.js"></script>
</head>
<body>
<div id="container">
    <div id="divD3">
        <img id="icon-delete" src="img/icon-dropTarget-delete.png" />
    </div>
    <div id="divUI" ontouchstart=""> <!-- ontouchstart needed as a workaround for the css :active property -->
        <form id="UIForm" >
            <fieldset>
                <legend>Search</legend>
                <input type="text" id="searchInputField" value="angst">
                <input type="submit" value="add">

            </fieldset>
            <fieldset>
                <legend>General</legend>
                <div data-bind="css: {selectedCheckboxStyle: enableCollision()}">
                    <label class="checkboxLabel">
                        <input id="collisionCheckbox" type="checkbox" data-bind="checked: enableCollision" />
                        enable collision
                    </label>
                </div>
                <div data-bind="css: {selectedCheckboxStyle: enableScreensaverMode()}">
                    <label class="checkboxLabel">
                        <input id="screensaverCheckbox" type="checkbox" data-bind="checked: enableScreensaverMode" />
                        enable screensaver
                    </label>
                </div>
            </fieldset>
            <fieldset>
                <legend>Relevance options</legend>
                <label class="fieldsetLabel">Compare nodes by:</label>
                    <p data-bind="css: {selectedCheckboxStyle: relevanceFlagAssociation()}">
                        <label class="checkboxLabel">
                            <input class="relevanceCheckbox" id="associationCheckbox" type="checkbox" data-bind="checked: relevanceFlagAssociation" />
                            association
                        </label>
                    </p>
                    <p data-bind="css: {selectedCheckboxStyle: relevanceFlagSubject()}">
                        <label class="checkboxLabel">
                            <input class="relevanceCheckbox" id="subjectCheckbox" type="checkbox" data-bind="checked: relevanceFlagSubject" />
                            subject
                        </label>
                    </p>
                    <p data-bind="css: {selectedCheckboxStyle: relevanceFlagAtmosphere()}">
                        <label class="checkboxLabel">
                            <input class="relevanceCheckbox" id="atmosphereCheckbox" type="checkbox" data-bind="checked: relevanceFlagAtmosphere" />
                            atmosphere
                        </label>
                    </p>
                    <p data-bind="css: {selectedCheckboxStyle: relevanceFlagEmotion()}">
                        <label class="checkboxLabel">
                            <input class="relevanceCheckbox" id="emotionCheckbox" type="checkbox" data-bind="checked: relevanceFlagEmotion" />
                            emotion
                        </label>
                    </p>
                    <p data-bind="css: {selectedCheckboxStyle: relevanceFlagMainMotive()}">
                        <label class="checkboxLabel">
                            <input class="relevanceCheckbox" id="mainMotiveCheckbox" type="checkbox" data-bind="checked: relevanceFlagMainMotive" />
                            main motive
                        </label>
                    </p>
                    <p data-bind="css: {selectedCheckboxStyle: relevanceFlagCreator()}">
                        <label class="checkboxLabel">
                            <input class="relevanceCheckbox" id="creatorCheckbox" type="checkbox" data-bind="checked: relevanceFlagCreator" />
                            creator
                        </label>
                    </p>
                <label  class="fieldsetLabel">Threshold: </label>
                <input type="range" name="relevanceSlider" id="relevanceSlider" min="0" max="15" data-bind="value: relevanceThreshold">
                <label class="relevanceThresholdLabel" data-bind="text: relevanceThreshold"></label>
            </fieldset>
            <fieldset>
                <legend>Groups and clustering</legend>
                <label class="fieldsetLabel">Group by: </label>
                <label class="checkboxLabel"><input name="optionsRadios" type="radio" value="" data-bind="checked: selectedGroupKey" />none</label>
                <label class="checkboxLabel"><input name="optionsRadios" type="radio" value="creator" data-bind="checked: selectedGroupKey" />creator</label>
                <label class="checkboxLabel"><input name="optionsRadios" type="radio" value="medium" data-bind="checked: selectedGroupKey" />medium</label>
                <ul data-bind="foreach: groupsRollup">
                    <li>
                        <span data-bind="style:{color: $root.colorScale()[$index()]}" class="groupRect">■</span>
                        <span data-bind="text: key"> </span>
                        <span> (<span data-bind="text: values"> </span>)</span>
                    </li>
                </ul>
                <p data-bind="css: {selectedCheckboxStyle: enableClustering()}">
                    <label class="checkboxLabel">
                        <input id="clusterCheckbox" type="checkbox" data-bind="enable: selectedGroupKey, checked: enableClustering" />
                        enable clustering
                    </label>
                </p>
                <button id="removeAllButton">clear all</button>
            </fieldset>
        </form>
    </div>
</div>
</body>


<script src="js/main.js"></script>
<script src="js/uiViewModel.js"></script>
<script src="js/ui.js"></script>
</html>